<template>
	<scroll-view class="my-index" scroll-y @scrolltolower="getProductListByMType">
		<view class="search" @click="navtoCateList()">
			<view class="search-input">点击搜索</view>
			<text class="iconfont icon-sousuo search-icon"></text>
			<view class="serarch-btn">搜索</view>
		</view>
		<view class="cate">
			<!-- <view v-for="(item,index) in cate5List" :key="item.id" @click="listByCateId(item.id)"> -->
			<view class="picbox" v-for="(item,index) in cate5List" :key="item.id" @click="relaunchCateList(item.id)">
				<image class="pic" :class="'bg'+index" :src="item.pic" mode="widthFix"></image>
				<view class="pic-txt">{{item.cate_name}}</view>
			</view>
		</view>
		<view class="cate3">
			<view class="cate3-row">
				<view class="row-left1" @click="relaunchCateList(8)">技术求助</view>
				<view class="row-right1">
					<swiper class="row-swiper" autoplay vertical circular display-multiple-items="3" :interval="2000" :duration="1000">
						<swiper-item v-for="(item,index) in needHelpInfoList" :key="index" @click="toDetail(item.id)">{{item.tip}}</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="cate3-row">
				<view class="row-left2">
					<view class="row-left2-item" @click="relaunchCateList(6)">求纺机</view>
					<view class="row-left2-item" @click="relaunchCateList(7)">求配件</view>
				</view>
				<view class="row-right2">
					<swiper class="row-swiper" autoplay vertical circular display-multiple-items="3" :interval="2000" :duration="1000">
						<swiper-item v-for="(item,index) in needBuyInfoList" :key="index" @click="toDetail(item.id)">{{item.tip}}</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="product-list1">
			<view class="recomm-title">
				<view class="recomm-left">
					<view class="aa"></view>
					<view>精品推荐</view>
				</view>
				<view class="recomm-more" @click="toMore">
					<view>更多</view>
					<view><text class="iconfont icon-xiangyou"></text></view>
				</view>
			</view>
			<scroll-view class="cate-list" scroll-x>
				<view class="cate-item" @click="mTypeChange(index)" :class="{curr:currMTypeIndex==index}" v-for="(item,index) in mTypeList" :key="index">{{item.title}}</view>
			</scroll-view>
			<view class="product-list">
				<goods v-for="(item,index) in productList" :key="index" :item="item" @active="toSwiperList"></goods>
				<view style="width: 100%;" v-if="productList.length > 0" @click="getProductListByMType">
					<v-loadmore :status="loadStatus"></v-loadmore>
				</view>
				<v-nodata v-else></v-nodata>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import goods from "./goods";
	export default{
		components:{
			goods
		},
		data(){
			return {
				keyword: '',
				cate5List: [],
				cate3List: [],
				mTypeList: [],
				currMTypeIndex: 0,
				needHelpInfoList: [] ,// 求助信息列表
				needBuyInfoList: [], // 求购信息列表
				
				productList: [],
				page: 1,
				loadStatus: "more",
				total: 0,
			} 
		},
		created(){
			this.getProductListByMType();
			this.getInitDataMyIndex();
			this.getInfoList();
		},

		methods:{
			toSwiperList(id){
				this.$tool.navto(`/pages/other/swiper_list?type=0&id=${id}`);
			},
			navtoCateList(){
				this.$tool.navto(`/pages/goods_cate/goods_cate`);
			},
			relaunchCateList(cateId=0){
				this.$tool.relaunch(`/pages/goods_cate/goods_cate?cateId=${cateId}`)
			},
			toDetail(id){
				this.$tool.navto(`/pages/goods_details/index?id=${id}`);
			},
			getInfoList(){
				this.$http.get("v1/getIndexNeedInfoList",{},true).then(res=>{
					this.needHelpInfoList = res.data.needHelpInfoList;
					this.needBuyInfoList = res.data.needBuyInfoList;
				});
			},
			mTypeChange(index){
				if(this.currMTypeIndex == index) return;
				this.currMTypeIndex = index;
				this.reset()
				this.getProductListByMType("reset");
			},
			getInitDataMyIndex(){
				this.$http.get("v1/getInitDataMyIndex",{},true).then(res=>{
					this.cate5List = res.data.cate5List;
					this.cate3List = res.data.cate3List;
					this.mTypeList = res.data.mTypeList;
				});
			},
			reset(){
				this.page = 1
				this.loadStatus = "more"
				this.productList = []
				this.total = 0
			},
			getProductListByMType(reset){
				let that = this
				let type = this.mTypeList[this.currMTypeIndex];
				let mTypeId = 0;
				if(type) mTypeId = type.id;
				
				console.log(that.loadStatus);
				if (that.loadStatus != "more") return;
				that.loadStatus = "loading";
				that.$http.post(`v1/getProductListByMType/${mTypeId}`, {page:that.page},true).then(res=>{
					let data = res.data.pageData;
					if(that.page == 1) that.total = data.total;
					if(reset == "reset") that.productList = [];
					that.productList.push(...data.data);
					
					if(that.productList.length >= that.total) that.loadStatus = "nomore";
					else that.loadStatus = "more";
					
					that.page++;
				}).catch(err => {
					that.loadStatus = "more";
				});
				
				// this.$http.post("v1/getProductListByMType/"+mTypeId,{},true).then(res=>{
				// 	this.recommList = res.data.list;
				// });
			},
			toSearch(){
				this.$tool.navto(`/pages/goods/goods_search/index`);
			},
			listByCateId(cid){
				this.$tool.navto(`/pages/goods/goods_list/index?cid=${cid}`);
			},
			toPublish(cid){
				this.$tool.navto(`/pages/other/draft/draft_form?cid=${cid}`);
			},
			toMore(){
				this.$tool.navto(`/pages/goods_cate/goods_cate`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-index{
		// background-color: var(--view-theme);
		height: 100%;
		.cate{
			display: flex;
			justify-content: space-around;
			margin: 40rpx auto;
			.picbox{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			
			.pic{
				width: 90rpx;
				border-radius: 20rpx;
				&.bg0{
					background-color: #E7D0BD;
				}
				&.bg1{
					background-color: #DFE0D2;
				}
				&.bg2{
					background-color: #93DCFF;
				}
				&.bg3{
					background-color: #ff7244;
				}
				&.bg4{
					background-color: #f5bf70;
				}
				&.bg5{
					background-color: #B6ACB4;
				}
				&.bg6{
					background-color: #c1adcb;
				}
				&.bg7{
					background-color: #98B5C9;
				}
			}
			.pic-txt{
				font-size: 26rpx;
				margin-top: 15rpx;
			}
			}
		}
		.cate2{
			display: flex;
			
			.cate2-left{
				flex: 2;
				margin-right: 20rpx;
				.cate2-left1,.cate2-left2{
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 20rpx;
					border-radius: 20rpx;
					image{
						width: 120rpx;
					}
					.remark{
						margin-left: 20rpx;
					}
				}
				.cate2-left1{
					background-color: #E7D0BD;
					margin-bottom: 20rpx;
				}
				.cate2-left2{
					background-color: #DFE0D2;
				}
			}
			.cate2-right{
				flex: 1;
				.cate2-right1{
					height: 100%;
					box-sizing: border-box;
					background-color: #93DCFF;
					padding: 20rpx;
					border-radius: 20rpx;
					image{
						width: 120rpx;
						
					}
				}
			}
			.title{
				font-size: 40rpx;
				font-weight: 700;
			}
			.desc{
				color: #999999;
				margin-top: 10rpx;
			}
		}
		.cate3{
			display: flex;
			flex-direction: column;
			margin: 0 10rpx;
			.cate3-row{
				display: flex;
				.row-left1,.row-left2{
					font-size: 40rpx;
					width: 150rpx;
					text-align: center;
					border-radius: 20rpx;
					max-height: 160rpx;
				}
				.row-left1{
					padding: 20rpx;
					background-color: #E7D0BD;
					margin-bottom: 20rpx;
				}
				.row-left2{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.row-left2-item{
						background-color: #93DCFF;
						padding: 12rpx 20rpx;
						font-size: 34rpx;
						border-radius: 20rpx;
						// &:first-child{
						// 	margin-bottom: 10rpx;
						// }
					}
				}
				.row-right1,.row-right2{
					width: calc(750rpx - 150rpx - 40rpx);
					font-size: 30rpx;
					margin-left: 20rpx;
					padding: 20rpx;
					background-color: #E7D0BD;
					border-radius: 20rpx;
					max-height: 160rpx;
					min-height: 150rpx;
					box-sizing: border-box;
					.row-swiper{
						height: 100%;
					}
				}
				.row-right1{
					background-color: #E7D0BD;
					margin-bottom: 20rpx;
				}
				.row-right2{
					background-color: #93DCFF;
				}
			}

		}
		.search{
			width: 100%;
			position: relative;
			.search-input{
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				box-sizing: border-box;
				border: solid 1px #ccc;
				padding: 5rpx 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999999;
			}
			.search-icon{
				position: absolute;
				font-size: 50rpx;
				left: 15rpx;
				top: calc(50% - 25rpx);
			}
			.serarch-btn{
				position: absolute;
				top: calc(50% - 30rpx);
				right: 12rpx;
				background-color: var(--view-theme);
				color: #fff;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}
		}
		.product-list1{
			margin-top: 40rpx;
			width: 100%;
			.recomm-title{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.recomm-left{
					display: flex;
					.aa{
						width: 4px;
						height: 100%;
						background-color: var(--view-theme);
						border-radius: 2px;
						margin-right: 4px;
					}
				}
				.recomm-more{
					display: flex;
				}
			}
			.cate-list{
				display: flex;
				font-size: 34rpx;
				width: 100%;
				overflow: scroll;
				white-space: nowrap;
				margin: 30rpx 0;
				.cate-item{
					flex-shrink: 0;
					margin-right: 20rpx;
					padding: 10rpx;
					display: inline;
					&.curr{
						font-weight: bold;
					}
				}
			}
			.product-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 15rpx;
			}
		}
		.my-recomm{
			margin-top: 40rpx;
			.recomm-title{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.recomm-left{
					display: flex;
					.aa{
						width: 4px;
						height: 100%;
						background-color: var(--view-theme);
						border-radius: 2px;
						margin-right: 4px;
					}
				}
				.recomm-more{
					display: flex;
				}
			}
			.recomm-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
	}
</style>